<div id="formDiv"></div>
<script type="text/html" id="warehouseProductionOrderformContent">
  <form lay-filter="warehouseProductionOrderForm" id="warehouseProductionOrderForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto">
        <div class="layui-form-item tableContent">
          <table class="layui-table" id="warehouseBillInvoice" lay-filter="warehouseBillInvoice"></table>
        </div>
        <div>
          账单发票记录信息：
          <button class="layui-btn " id="addInvoiceRecord">添加发票记录</button>
        </div>

        <div class="layui-form-item tableContent">
          <table class="layui-table" id="InvoiceRecord" lay-filter="InvoiceRecord"></table>
        </div>


        <table class="layui-table" id="lookDataForm" lay-filter="lookDataForm">
          <thead>
          <tr>
            <th lay-data="{field:'customerName', width:150, sort: true, fixed: 'left'}">客户名称</th>
            <th lay-data="{field:'billPrice', width:150, sort: true, fixed: 'left'}">合计金额
            </th>
            <th lay-data="{field:'totalDetailPrice', width:150, sort: true, fixed: 'left'}">预计金额
            </th>
            <th lay-data="{field:'billStatusDesc', width:150, sort: true, fixed: 'left'}">状态</th>
            <th lay-data="{field:'billType', width:150, sort: true, fixed: 'left'}">结算方式</th>
            <th lay-data="{field:'billPeriod', width:150, sort: true, fixed: 'left'}">日期</th>

          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <input type="text" class="layui-input" id="customerName" disabled name="customerName"/>
            </td>
            <td>
              <input type="text" class="layui-input" id="billPrice" disabled name="billPrice"/>
            </td>
            <td>
              <input type="text" class="layui-input" id="totalDetailPrice" disabled name="totalDetailPrice"/>
            </td>
            <td>
              <input class="layui-input adv-disable" id="billStatusDesc" disabled name="billStatusDesc"/>
            </td>
            <td>
              <input type="text" class="layui-input" id="billType" disabled name="billType"/>
            </td>
            <td>
              <input class="layui-input adv-disable" id="billPeriod" disabled name="billPeriod"/>
              <!--              <input type="text" class="layui-input adv-disable" id="creatorName" disabled name="creatorName" />-->
            </td>


          </tr>
          </tbody>
        </table>
        <div class="layui-form-item text-right">
          <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
      </div>
    </div>
  </form>
</script>
<!-- 添加发票表单弹窗 -->
<script type="text/html" id="invoiceRecordFormContent">
  <form lay-filter="invoiceRecordForm" id="invoiceRecordForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
      <label class="layui-form-label">付款凭证编号</label>
      <div class="layui-input-block">
        <input type="hidden" id="customerName" name="customerName" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">付款银行账户</label>
      <div class="layui-input-block">
        <input type="text" id="type" name="type" value="1"  class="layui-input" disabled />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">付款银行</label>
      <div class="layui-input-block">
        <select  id="contractCategoryId" name="contractCategoryId" lay-filter="contractCategoryId" lay-verify="required" lay-search required></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">付款金额</label>
      <div class="layui-input-block">
        <input type="text" id="orderCode" name="orderCode" placeholder="请选择关联托管订单"  lay-verify="required"  required class="layui-input"  />
        <!--                <select  id="orderCode" name="orderCode" lay-filter="orderCode" lay-verify="required" lay-search required></select>-->
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">账单剩余结算余额</label>
      <div class="layui-input-block">
        <input id="contractRemark" name="contractRemark" placeholder="请输入合同备注号" type="text" class="layui-input" autocomplete="off" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <input id="contractPrice" name="contractPrice" placeholder="请输入合同金额" type="text" class="layui-input" autocomplete="off" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">付款日期</label>
      <div class="layui-input-block">
        <input id="contractPrice" name="contractPrice" placeholder="请输入合同金额" type="text" class="layui-input" autocomplete="off" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">付款人</label>
      <div class="layui-input-block">
        <select  id="approverId" name="approverId" lay-filter="approverId" lay-verify="required" lay-search required></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">上传附件</label>
      <div class="layui-input-block">
        <div id="contractFileUrlPath" class="companyFormPhotos"></div>
        <div id="btnContractFileUrl" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传附件</div>
        <input  id="contractFileUrl" name="contractFileUrl" type="hidden" class="layui-input" lay-verify=""/>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="invoiceRecordFormSubmit" lay-submit>提交</button>
    </div>
  </form>
</script>
<script>
  layui.use(["layer", "form", "table", "admin", "laydate", "upload", "laytpl"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    let laydate = layui.laydate;
    let laytpl = layui.laytpl;
    const nowData = {...parentData};
    let data = nowData?.data;

    laytpl(warehouseProductionOrderformContent.innerHTML).render({...nowData}, function (html) {
      $("#formDiv").after(html);
    });

    const tableVal = table.render({
      elem: "#warehouseBillInvoice",
      page: false,
      limit: 999999,
      //   height: 400,
      data: [],
      cols: [
        [
          {field:'customerName',align: "center", title: "账单编码"},
          {field:'customerName',align: "center", title: "客户名称"},
          {field:'customerName',align: "center", title: "账单开始时间"},
          {field:'customerName',align: "center", title: "账单结束时间"},
          {field:'customerName',align: "center", title: "子账单数"},
          {field:'customerName',align: "center", title: "子订单数"},
          {field: "billPeriod", align: "center", title: "账单总金额"},
          { field: "billPeriod", align: "center", title: "结算记录" },
          { field: "billPeriod", align: "center", title: "已结算金额" },
          { field: "billPeriod", align: "center", title: "发票记录" },
          { field: "billPeriod", align: "center", title: "生成时间" },
        ]
      ],
    });
    const InvoicetableVal = table.render({
      elem: "#InvoiceRecord",
      page: false,
      limit: 999999,
      //   height: 400,
      data: [],
      cols: [
        [
          {field:'customerName',align: "center", title: "ID"},
          {field:'customerName',align: "center", title: "发票记录编号"},
          {field:'customerName',align: "center", title: "发票编号"},
          {field:'customerName',align: "center", title: "付款金额"},
          {field:'customerName',align: "center", title: "未发票余额"},
          {field:'customerName',align: "center", title: "备注"},
          {field: "billPeriod", align: "center", title: "开票人"},
          { field: "billPeriod", align: "center", title: "付款时间" },
          { field: "billPeriod", align: "center", title: "录入人" },
          { field: "billPeriod", align: "center", title: "录入时间" },
        ]
      ],
    });
    /*客户账单明细*/
    tableVal.reload({
      data: nowData.data
    })
    /*发票记录*/
    InvoicetableVal.reload({
      data: nowData.data
    })

    table.on("tool(warehouseBillInvoice)", function (obj) {
      var d = obj.data; // 获取当前行的数据
      var layEvent = obj.event; // 获取事件名（edit 或 del）
      if (obj.tr) {
        obj.tr.on("click", function (e) {
          e.preventDefault(); // 防止默认行为
        });
      }
    });

    // 上传图片
    function uploadImg(_elem, pathId, inputId) {
      upload.render({
        elem: '#' + _elem
        , url: config.upload_url + 'uploadFile'
        , data: {}
        , accept: 'file'
        , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
        , headers: { Authorization: 'Bearer ' + config.getToken() }
        , done: function (res) {
          if (res.code == 200) {
            layer.msg(res.msg || "上传成功", { icon: 1 });
            let imagUrl = res.data.url;
            $('#' + pathId).html('<img src="' +imagUrl + '"/>');
            $('#' + inputId).val(imagUrl);
          } else if (res.code == 502) {
            return location.replace('member/login.html');
          } else {
            layer.msg(res.msg || "上传失败", { icon: 2 });
          }
        }
      });
    }

    $("#addInvoiceRecord").click(function () {
      let newindex = admin.formOpen({
        type: 1,
        area: '640px',
        offset: '10px',
        title: '添加账单发票记录',
        content: $('#invoiceRecordFormContent').html(),
        success: function () {
          // 表单提交事件
          form.on('submit(invoiceRecordFormSubmit)', function (d) {
            layer.load(2);
            admin.req(data ? 'warehouse/warehouse/contract/update' : 'warehouse/warehouse/contract/add', d.field, function (res) {
              layer.closeAll('loading');
              if (res.code == 200) {
                layer.msg(res.msg, {icon: 1});
                table.reload('warehouseContractTable');
                layer.close(newindex);
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, data ? 'PUT' : 'POST');
            return false;
          });

          $('#btnContractFileUrl').click(uploadImg('btnContractFileUrl','contractFileUrlPath','contractFileUrl'));

        }
      });
    });
  });
</script>

<style>
  #invoiceRecordForm .layui-form-label {
    width: 125px;
  }

  #invoiceRecordForm .layui-input-block {
    margin-left: 155px;
  }

  #invoiceRecordForm .layui-form-item .layui-inline {
    /* margin-bottom: 5px; */
    margin-right: 0px;
  }
</style>
